<mat-form-field [appearance]="to.appearance || 'fill'" class="w-full">
  <mat-label>{{ to.label }}</mat-label>
  <!-- 单选不开启搜索 -->
  @if (!to.multiple && !to.search) {
    <mat-select
      disableOptionCentering="true"
      panelClass="custom-select"
      [formControl]="formControl"
      [formlyAttributes]="field"
      disableRipple
      #select
    >
      <cdk-virtual-scroll-viewport itemSize="48" minBufferPx="400" maxBufferPx="800">
        <mat-option *cdkVirtualFor="let option of matOptions" [value]="option.value">
          @if (to.icon) {
            <mat-icon [svgIcon]="option.value" />
          }
          {{ option.label }}
        </mat-option>
      </cdk-virtual-scroll-viewport>
    </mat-select>
  }

  <!-- 单选开启搜索 -->
  @if (!to.multiple && to.search) {
    <mat-select
      disableOptionCentering="true"
      panelClass="custom-select"
      [formControl]="formControl"
      [formlyAttributes]="field"
      disableRipple
      #select
    >
      <mat-option>
        <ngx-mat-select-search
          [placeholderLabel]="to.placeholder || '搜索'"
          [noEntriesFoundLabel]="to.noFound || '没有找到'"
          [formControl]="searchCtrl"
        />
      </mat-option>
      <cdk-virtual-scroll-viewport itemSize="48" minBufferPx="400" maxBufferPx="800">
        <mat-option *cdkVirtualFor="let option of filteredOptions | async" [value]="option.value">
          @if (to.type === 'icon') {
            <mat-icon [svgIcon]="option.value" />
          }
          {{ option.label }}
        </mat-option>
      </cdk-virtual-scroll-viewport>
    </mat-select>
  }
  <!-- 多选不开启搜索 -->
  @if (to.multiple && !to.search) {
    <mat-select
      disableOptionCentering="true"
      panelClass="custom-select"
      [formControl]="formControl"
      [formlyAttributes]="field"
      multiple
      disableRipple
      #select
    >
      <cdk-virtual-scroll-viewport itemSize="48" minBufferPx="400" maxBufferPx="800">
        <mat-option *cdkVirtualFor="let option of matOptions" [value]="option.value">
          @if (to.type === 'icon') {
            <mat-icon [svgIcon]="option.value" />
          }
          {{ option.label }}
        </mat-option>
      </cdk-virtual-scroll-viewport>
    </mat-select>
  }

  <!-- 多选开启搜索 -->
  @if (to.multiple && to.search) {
    <mat-select
      disableOptionCentering="true"
      panelClass="custom-select"
      [formControl]="formControl"
      [formlyAttributes]="field"
      multiple
      disableRipple
      #select
    >
      <mat-option>
        <ngx-mat-select-search
          [placeholderLabel]="to.placeholder || '搜索'"
          [noEntriesFoundLabel]="to.noFound || '没有找到'"
          [formControl]="searchCtrl"
        />
      </mat-option>
      <cdk-virtual-scroll-viewport itemSize="48" minBufferPx="400" maxBufferPx="800">
        <mat-option *cdkVirtualFor="let option of filteredOptions | async" [value]="option.value">
          @if (to.type === 'icon') {
            <mat-icon [svgIcon]="option.value" />
          }
          {{ option.label }}
        </mat-option>
      </cdk-virtual-scroll-viewport>
    </mat-select>
  }
</mat-form-field>
